<template>
    <el-scrollbar>
        <div class="containers">
            <div v-loading="loading" class="canvas" ref="canvasRef"></div>
        </div>
    </el-scrollbar>
</template>
<script lang="ts">
import { defineComponent, onMounted, onUnmounted, reactive, ref, toRaw, toRefs } from 'vue'
import BpmnViewer from "bpmn-js/lib/Viewer"
import request from '/@/utils/request';
export default defineComponent({
    name: "processView",
    props:{
        processInsId: String,
    },
    setup(props) {
        const state = reactive({
            loading: false,
            bpmnViewer: null as BpmnViewer,
        })

        const canvasRef = ref();
        const createNewDiagram = (bpmnViewer: BpmnViewer) =>{
            if(!props.processInsId){
                return;
            }
            state.loading = true;
            request.get('/workflow/modeler/'+props.processInsId).then((res)=>{
                // 将字符串转换成图显示出来
                bpmnViewer.importXML(res.data, (err: any) => {
                    if(!err){
                        let canvas = bpmnViewer.get("canvas");
                        // canvas.zoom("fit-viewport", "");

                        request.get('/workflow/process/node/'+props.processInsId).then((res)=>{
                            res.data.forEach((element: any) => {
                                if(element.endTime){
                                    canvas.addMarker(element.activityId, 'completed'); 
                                }else{
                                    canvas.addMarker(element.activityId, 'todo'); 
                                }
                            });
                        })
                    }else{
                    }
                })
            }).finally(()=>{
                state.loading = false;
            })
            
        }

        onMounted(()=>{
            const bpmnViewer = new BpmnViewer({
                container: canvasRef.value,
                width: '2000px'
            })
            state.bpmnViewer = bpmnViewer;
            createNewDiagram(bpmnViewer) // 新增流程定义
        })
        onUnmounted(()=>{
            state.bpmnViewer.destroy();
        })
        return {
            ...toRefs(state),
            canvasRef,
        }
    },
})
</script>
<style lang="scss" scoped>
  /*左边工具栏以及编辑节点的样式*/
//   @import 'bpmn-js/dist/assets/diagram-js.css';
//   @import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
//   @import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
//   @import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
  .containers{
    // position: absolute;
    background-color: #ffffff;
    width: 100%;
    height: 700px;
    .canvas{
      width: 100%;
      height: 100%;
    }
 }

</style>
<style lang="scss">
.bjs-powered-by {
    display: none;
}
.djs-container .completed .djs-outline {
   stroke-width: 2px !important;
   stroke: var(--el-color-success) !important;
}
.djs-container .completed .djs-visual>:nth-child(1) {
   fill: var(--el-color-success) !important;
}
.djs-container .todo .djs-outline {
   stroke-width: 2px !important;
   stroke: var(--el-color-primary) !important;
}
.djs-container .todo .djs-visual>:nth-child(1) {
   fill: var(--el-color-primary) !important;
}

</style>